<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
	<title>Login</title>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<style>
		* { font-family: "微软雅黑";margin: 0; padding: 0; font-size: 12px;}
		html,body {
			height: 100%;
		}
		body {
			background: url("images/login_bg_line.jpg") repeat-x center;
			background-size:auto 100%;
			position: relative;
		}
		.bdbg{
			position: absolute;width: 100%;height: 100%;left: 0;right: 0;top: 0;bottom: 0;
			background: url("images/login_bg.jpg") no-repeat center center;
			background-size:auto 100%;
			position: relative;
			opacity: 0.8;
		}
		a {
			background-color: transparent;
			color: #32b0ed;
			text-decoration: none;
		}
		a:active,
		a:hover {
			outline: 0;
		}
		.fl{float: left;}
		.fr{float: right;}

		.bg-warning {
			background-color: #fcf8e3;
			padding: 15px;
		}
		input[type="radio"],
		input[type="checkbox"] {
			margin: 4px 0 0;
			margin-top: 1px \9;
			line-height: normal;
		}
		.radio,
		.checkbox {
			position: relative;
			display: block;
			margin-top: 10px;
			margin-bottom: 10px;
			font-size: 12px;
		}
		.radio label,
		.checkbox label {
			min-height: 20px;
			padding-left: 20px;
			margin-bottom: 0;
			font-weight: normal;
			cursor: pointer;
		}
		.radio input[type="radio"],
		.radio-inline input[type="radio"],
		.checkbox input[type="checkbox"],
		.checkbox-inline input[type="checkbox"] {
			position: absolute;
			margin-top: 4px \9;
			margin-left: -20px;
		}
		.btn {
			display: inline-block;
			width: 90px;
			margin:0 40px;
			font-size: 16px;
			font-weight: normal;
			line-height:40px;
			text-align: center;
			white-space: nowrap;
			vertical-align: middle;
			-ms-touch-action: manipulation;
			touch-action: manipulation;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			border: 1px solid transparent;
			background-color: #3c92bb;
			color: #fff;
		}
		.btn:focus,
		.btn.focus {
			color: #fff;
			background-color: #286090;
			border-color: #122b40;
		}
		.btn:hover {
			color: #fff;
			background-color: #286090;
			border-color: #204d74;
		}
		.clearfix:before,
		.clearfix:after {
			display: table;
			content: " ";
			clear: both;
		}
		.pull-right {
			float: right !important;
		}
		.pull-left {
			float: left !important;
		}
		.login {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 540px;
			height: 340px;
			margin-left: -270px;
			margin-top: -170px;
			background-color:#fff;
			background-color: rgba(255, 255, 255, 0.6);
			padding-top: 20px;
			border-radius: 10px;
		}
		.login-title {position: relative;width: 554px;margin-left: -7px;}
		.login-title .arr{position: absolute;top:-7px;width: 7px;height: 7px;background: url(images/login_arr_01.png);}
		.login-title .a_right{background: url(images/login_arr_02.png);right: 0px;}

		.login-title h2{height: 46px;background: #318cb7;color: #fff; text-align: center;line-height: 46px;font-size: 20px;font-weight: normal;}
		.login-form{padding: 46px 80px 0;}
		.form-group {
			text-align: center;
			margin-bottom: 15px;
			line-height: 36px;
			overflow: hidden;
		}
		.sr-only {font-size: 16px;color: #666;}
		.form-control{width: 314px;height: 36px;padding: 0 3px;}
		.login-footer {padding: 0 20px;}
		.login-footer .bzzx{font-size: 14px;color: #318cb7;}
		.mt30 { margin-top: 30px;}
		.shadow{position: absolute;bottom:-10px;left:-23px;width: 587px;height: 12px;background: url(images/shadow.png);}
	</style>

	<script type="text/javascript">
        if(window.parent.length > 0){
            top.window.location = "/login.html";
        }
        $(function() {
            $('#username').focus();
            $('#loginFrom').submit(function() {
                if(!$('#username').val().length) {
                    $('#msg').css({'display':'block'}).text('请输入用户名');
                    $('#username').focus();
                    return;
                }
                if(!$('#password').val().length) {
                $('#msg').css({'display':'block'}).text('请输入密码');
                    $('#password').focus();
                    return;
                }
                var postData = $("#loginFrom").serialize();//序列化表单，后台可正常通过post方法获取数据
                $.ajax({
                    type: "post",
                    url: "v1/api0/security/login",
                    data: postData,
                    success: function(data) {
                        if (data.code == 200) {
                            window.location.href = '/home.html';
                        } else {
                        	$('#msg').css({'display':'block'}).text(data.msg);
                        }
                    }
                });
            });

            $('#submit').click(function() {
                $('#loginFrom').submit();
            });
        });
	</script>
</head>
<body>
<div class="bdbg"></div>
<div id="outer" class="login">
	<div class="login-box box-default">
		<div class="login-title">
			<span class="arr a_left"></span>
			<span class="arr a_right"></span>
			<h2>畅联云业务管理平台</h2>
		</div>
		<div id="middle" class="login-form">
			<form action="" class="" id="loginFrom">
				<div id="msg" class="form-group bg-warning" style="display: none;"></div>
				<div class="form-group clearfix">
					<label for="" class="sr-only fl">帐号</label>
					<input id="username" name="username" type="text" class="form-control fr" placeholder="帐号"/>
				</div>
				<div class="form-group">
					<label for="" class="sr-only fl">密码</label>
					<input id="password" name="password" type="password" class="form-control fr" placeholder="密码"/>
				</div>
				<div class="checkbox" style="line-height: 21px;">
					<label for="" class="checkbox"><input type="checkbox"/> 记住密码</label>
				</div>
				<div class="form-group">
					<button id="submit" type="button" class="btn">登录</button>
					<button type="reset" class="btn" name="reset" onclick="document.getElementById('username').focus();">重置</button>
				</div>
			</form>
		</div>
	</div>
	<div class="clearfix"></div>
	<div class="login-footer">
		<a class="bzzx clearfix fr" href="javascript:;">帮助中心</a>
	</div>
	<div class="shadow"></div>
</div>
</body>
</html>
